<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Point Cloud Viewer</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #000;
      font-family: Arial, sans-serif;
    }

    #container {
      position: relative;
      width: 100vw;
      height: 100vh;
    }

    #info {
      position: absolute;
      top: 10px;
      left: 10px;
      color: white;
      z-index: 100;
      background: rgba(0, 0, 0, 0.5);
      padding: 10px;
      border-radius: 5px;
    }

    #controls {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 100;
      background: rgba(0, 0, 0, 0.5);
      padding: 15px;
      border-radius: 5px;
      color: white;
    }

    .control-group {
      margin-bottom: 10px;
    }

    .control-group label {
      display: inline-block;
      width: 100px;
      font-size: 12px;
    }

    .control-group input {
      width: 100px;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="info">
      <div>Status: <span id="status">Disconnected</span></div>
      <div>Points: <span id="pointCount">0</span></div>
      <div>FPS: <span id="fps">0</span></div>
      <div>Camera: <span id="cameraStatus">Manual</span></div>
    </div>


    <div id="controls">
      <div class="control-group">
        <label>Point Size:</label>
        <input type="range" id="pointSize" min="0.1" max="5" step="0.1" value="1">
        <span id="pointSizeValue">1.0</span>
      </div>
      <div class="control-group">
        <label>Color Mode:</label>
        <select id="colorMode">
          <option value="height">Height</option>
          <option value="intensity">Intensity</option>
          <option value="fixed">Fixed Color</option>
        </select>
      </div>
      <div class="control-group">
        <label>Coordinate System:</label>
        <select id="coordinateSystem">
          <option value="NONE">No Transform</option>
          <option value="ROS_TO_THREEJS" selected>ROS → Three.js</option>
          <option value="VELODYNE_TO_THREEJS">Velodyne → Three.js</option>
          <option value="ROTATE_Z_90">Rotate Z 90°</option>
          <option value="ROTATE_Y_90">Rotate Y 90°</option>
          <option value="ROTATE_X_90">Rotate X 90°</option>
          <option value="SWAP_XZ">Swap X↔Z</option>
          <option value="SWAP_YZ">Swap Y↔Z</option>
          <option value="FLIP_Z">Flip Z</option>
        </select>
      </div>
      <!-- 新增视角控制选项 -->
      <div class="control-group">
        <label>
          <input type="checkbox" id="autoResetView"> Auto Reset View
        </label>
      </div>
      <div class="control-group">
        <button id="resetView">Reset View</button>
        <button id="fitView">Fit to Data</button>
      </div>
    </div>


  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
  <script src="pointcloud.js"></script>
</body>

</html>